﻿<div>
    <h1>Material Design Extensions</h1>
    <div style="text-align: center;">
        <img src="https://github.com/spiegelp/MaterialDesignExtensions/raw/master/icon/icon.png" alt="Material Design Extensions icon" style="width: 256px;" />
    </div>
    <p>
        Material Design Extensions is based on <a href="https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit" target="_blank">Material Design in XAML Toolkit</a>
        to provide additional controls and features for WPF apps. The controls might not be specified in the
        <a href="https://material.io/guidelines/material-design/introduction.html" target="_blank">Material Design specification</a> or would crash the scope of
        <a href="https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit" target="_blank">Material Design in XAML Toolkit</a>.
    </p>
    <p>
        <a href="https://dev.azure.com/spiegelp/MaterialDesignExtensions/_build/latest?definitionId=2"><img src="https://dev.azure.com/spiegelp/MaterialDesignExtensions/_apis/build/status/MaterialDesignExtensions-.NET%20Desktop-CI" /></a>
        <a href="https://www.nuget.org/packages/MaterialDesignExtensions" target="_blank"><img src="https://img.shields.io/nuget/v/MaterialDesignExtensions.svg?style=flat&label=MaterialDesignExtensions&logo=nuget&color=blue" /></a>
    </p>
    <h2>Getting started</h2>
    <p>
        <ol>
            <li>
                Create a WPF desktop application
            </li>
            <li>
                Install Material Design Extensions via <a href="https://www.nuget.org/packages/MaterialDesignExtensions/" target="_blank">NuGet</a>
            </li>
            <li>
                Add the styles to your App.xaml (see <a href="https://github.com/spiegelp/MaterialDesignExtensions/blob/master/MaterialDesignExtensionsDemo/App.xaml" target="">App.xaml</a>
                in the demo)
            </li>
            <li>
                Add the namespace <code>xmlns:mde="clr-namespace:MaterialDesignExtensions.Controls;assembly=MaterialDesignExtensions"</code> to your XAML
            </li>
            <li>
                You are ready to use the controls
            </li>
        </ol>
    </p>

    <h2>Important notice</h2>
    <p>
        The configuration of Material Design Extensions v2.6.0 changed in order to enable changing the theme at runtime.
        Please change your configuration according to <a href="https://github.com/spiegelp/MaterialDesignExtensions/blob/master/MaterialDesignExtensionsDemo/App.xaml">App.xaml</a> of the demo.
    </p>

    <h2>Screenshots</h2>
    <p>
        Horizontal stepper
        <br />
        <img class="screenshot-image" src="https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/HorizontalStepper.png" alt="Horizontal stepper" />
    </p>
    <p>
        Vertical stepper
        <br />
        <img class="screenshot-image" src="https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/VerticalStepper.png" alt="Vertical stepper" />
    </p>
    <p>
        Side navigation
        <br />
        <img class="screenshot-image" src="https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/SideNavigation.png" alt="Side navigation" />
    </p>
    <p>
        Navigation rail
        <br />
        <img class="screenshot-image--small" src="https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/NavigationRail1.png" alt="Navigation rail" />
        &nbsp;&nbsp;&nbsp;&nbsp;
        <img class="screenshot-image--small" src="https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/NavigationRail2.png" alt="Navigation rail" />
    </p>
    <p>
        Tabs
        <br />
        <img class="screenshot-image" src="https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/TabControl1.png" alt="Tabs" />
    </p>
    <p>
        Open directory
        <br />
        <img class="screenshot-image" src="https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/OpenDirectoryControl1.png" alt="Open directory" />
    </p>
    <p>
        Open file
        <br />
        <img class="screenshot-image" src="https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/OpenFileControl1.png" alt="Open file" />
    </p>
    <p>
        Save file
        <br />
        <img class="screenshot-image" src="https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/SaveFileControl1.png" alt="Save file" />
    </p>
    <p>
        Material window and app bar
        <br />
        <img class="screenshot-image" src="https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/MaterialWindow1.png" alt="Material window and app bar" />
    </p>
    <p>
        Grid list
        <br />
        <img class="screenshot-image" src="https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/GridList.png" alt="Grid list" />
    </p>
    <p>
        Persistent search
        <br />
        <img class="screenshot-image" src="https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/PersistentSearch.png" alt="Grid list" />
    </p>
    <p>
        Autocomplete
        <br />
        <img class="screenshot-image" src="https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/Autocomplete.png" alt="Autocomplete" />
    </p>
    <p>
        Oversized number spinner
        <br />
        <img class="screenshot-image" src="https://raw.githubusercontent.com/spiegelp/MaterialDesignExtensions/master/screenshots/OversizedNumberSpinner.png" alt="Oversized number spinner" />
    </p>
    <h2>Documentation</h2>
    <p>
        You find the API documentation <a href="javascript: appViewModel.goToNavigationItemId('documentation')">here</a>.
    </p>
    <h2>License</h2>
    <p>
        Material Design Extensions is licensed under the <a href="javascript: appViewModel.goToNavigationItemId('license')">MIT license</a>.
    </p>
</div>